<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>社交牛逼症来袭</title>
	<style>
	body{
			background-image: url("image/小熊.jpg");
			background-size: 100%;
	}
		
		.con {
    position: relative;
}
.nav > li {
    display: inline;
    float:left;
}
.nav li a {
    color: #FFFF0F;
    display: block;
    line-height: 20px;
    padding: 15px 30px 15px 148px;
}
.con:hover {
    cursor: pointer;
}
.con:hover .con-box{
     transform: translateZ(-25px) rotateX(90deg);
}
.con-box {
     transition: all .3s ease-out;
    transform: translatez(-25px);
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}
.cont {
    transform: rotatex(0deg) translatez(25px);
}
.back {
    transform: rotatex(-90deg) translatez(25px);
    color: #BD06DE;
}
.cont, .back {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background:#98a9fc;  
    padding: 15px 30px 15px 31px;
    color: white;
    box-sizing: border-box;
}
.nav li a:hover .cont,  
.nav li a:hover .back {
    background-color:#4A6DC0;
}
	</style>
</head>

<body>
<span style="text-align: center">	
	<div>
		<ul class="nav">
    		<li><a href="index.html" class="con"> 0000 <span class="con-box"><span class="cont">个人首页</span><span class="back"><span style="font-size: 21px">Let's go back!</span></span>
    </span> </a></li>
    <li><a href="个人简介.html" class="con"> 1111 <span class="con-box"><span class="cont">个人简介</span><span class="back"><span style="font-size: 21px">个人简介</span></span></span> </a></li>
    <li><a href="我的家乡.html" class="con"> 1111 <span class="con-box"><span class="cont">我的家乡</span><span class="back"><span style="font-size: 21px">新疆</span></span></span> </a></li>
    <li><a href="我的爱好.html" class="con"> 1111 <span class="con-box"><span class="cont">我的爱好</span><span class="back"><span style="font-size: 21px">跳舞</span></span></span> </a></li>
    <li><a href="我的偶像.html" class="con"> 1111 <span class="con-box"><span class="cont">我的偶像</span><span class="back"><span style="font-size: 21px">偶像</span></span></span> </a></li>
</div>
</span>	
	<span style="position: absolute;top: 100px;text-align: center;left: 200px;right: 200px">
	</span>
<div align="center">
    <img src="image/直视我1.jpg" width="250" height="250"/>
    <img src="image/直视我2.jpg" width="250" height="250"/>
</div>
    
    <P style="font-family:verdana;color:rgb(0, 0, 0);font-size:30px;" align="center">我是CS2206的罗依含。</P>
    <p style="font-family:verdana;color:rgb(0, 0, 0);font-size:30px;" align="center">是一个热情开朗的狮子座女孩。</p>
    <P style="font-family:verdana;color:rgb(0, 0, 0);font-size:30px;" align="center">平时喜欢跳舞Kpop追剧打王者。</P>
    <p style="font-family:verdana;color:rgb(0, 0, 0);font-size:30px;" align="center">我的QQ是2914247554，尽情联系我吧！</p>
	
</body>
</html>
